import { List, Image, Space, Tag, InfiniteScroll } from 'antd-mobile'
import Link from 'next/link'
import router from 'next/router'
import React, { useState } from 'react'
import timeConvert from '../../../libs/timeConvert'
import { judgeLoad } from '../../../libs/utils'
import { DingdanStat, Relevance } from '../../../models/enums'
import { IDingdan } from '../../../models/types'
import Empty from '../../Empty'

import styles from './style.module.scss'

interface Props {
  dingdans: IDingdan[]
  hasMore: boolean
  getDingdans: (skip: number) => void
}

const Dingdan = ({ dingdans, getDingdans, hasMore }: Props) => {

  return (
    <List header='订单'>
      {
        dingdans?.map(dingdan =>
          <List.Item
            arrow={false}
            key={dingdan.cart._id}
            onClick={() => router.push(`/user/dingdan?dingdanid=${dingdan._id}&cart=${dingdan.cart._id}`)}
            extra={
              <Space direction='vertical' align='end'>
                {dingdan.cart.confirm === DingdanStat.Cancel &&
                  <Tag color='default'>已取消订单</Tag>}
                {dingdan.cart.confirm === DingdanStat.Queren &&
                  <Tag color='success'>确认收货</Tag>}
                {dingdan.cart.confirm === DingdanStat.Waiting &&
                  <Tag color='warning'>货物运输中</Tag>}
                {dingdan.cart.confirm === DingdanStat.Daohuo &&
                  <Tag color='success'>货物送达</Tag>}
                {dingdan.cart.confirm === DingdanStat.Empty &&
                  <Tag color='danger'>缺货/断货</Tag>}
                <span className={styles.price}>
                  共计: {dingdan.cart.allprice} 元
                </span>
              </Space>
            }
            description={
              <Space wrap>
                {
                  dingdan.cart.names.map((item, idx) =>
                    <Tag key={idx} color='default'>{item}</Tag>
                  )
                }
                {timeConvert(dingdan.createAt) + ' 下单'}
              </Space>}
            prefix={
              <Space >
                <Image alt='' src={dingdan.banner} fit='cover'
                  width={45} height={60} />
              </Space>
            }
          >
            <div className={styles.content}>
              {dingdan.title}
            </div>
          </List.Item>
        )
      }
      {dingdans.length === 0 && <Empty />}
      {
        !judgeLoad(dingdans, hasMore) &&
        <InfiniteScroll
          loadMore={async () => getDingdans(dingdans.length)}
          hasMore={hasMore}
        />
      }
    </List>
  )
}

export default Dingdan
